@import "style";
@color: white;
@rem: 1/200rem;
@fontSize:#0061b2;
body{
    .bgColor(#f0f0f0);
}
.center{
    margin: 0 auto;
}
.button{
    .wh(156*@rem,64*@rem);
    margin: 0 auto;
    display: block;
    background-image: url("../images/btn.png");
    background-size: 100% 100%;
    .lineH(64*@rem);
    color: #002f73;
    .fs(24*@rem);
}
#pageSwaper{
    padding-bottom: 1.9rem;
}
.homepage_index_bg{
    .rel();
    .animate{
        .rel();
        .h(300*@rem);
        .bgColor(@newColor);
        .pt(55*@rem);
        .baseball{
            .wh(227*@rem,227*@rem);
            background: url(../images/squre.png) no-repeat center;
            .bgSize(100% auto);
            margin:0 auto;
            .rel();
            .of();
            border-radius: 100%;
            z-index: 11;
            .icon1{
                background: url(../images/squre_act1.png) no-repeat center;
                .bgSize(100% auto);
                .abs(50%,122*@rem);
                z-index: 22;
                .wh(269*@rem,133*@rem);
                .translate(-50%,0);
                -webkit-animation: bounce1 2s linear infinite; 
                animation: bounce1 2s linear infinite; 
            }
            .icon2{
                background: url(../images/squre_act2.png) no-repeat center;
                .bgSize(100% auto);
                .abs(50%,118*@rem);
                z-index: 33;
                .wh(313*@rem,130*@rem);
                .translate(-50%,0);
                -webkit-animation: bounce2 2s 1s linear infinite; 
                animation: bounce2 2s 1s linear infinite; 
            }
            .credits{
                .fs(17.12*@rem);
                color: @color;
                .tc();
                display: block;
                .pt(25*@rem);
                &>i{
                    .fs(40.85*@rem);
                    .mt(15*@rem);
                    display: block;
                    .lineH(40*@rem);
                }
            }
        }
    }
    .nav{
        .wh(100%,100*@rem);
        .lineH(100*@rem);
        .bgColor(@color);
        .mt(20*@rem);
        border-bottom: 1*@rem solid #C9C9C9;
        border-top: 1*@rem solid #C9C9C9;
        .header_user{
            .tc();
            &>ul{
                .rel();
                width:100%;
                &>li{
                    float :left;
                    width:20%;
                    &.swiper-slide-active{
                        border-bottom: 3*@rem solid #0071ce;
                        &>a{
                            color:#0071ce;
                        }
                    }
                }
            }
        }
    }
    /*积分详情*/
    .detail_info{
        .rel();
        .bgColor(@color);
        .mt(20*@rem);
        .title{
           height: 65*@rem;
           .lineH(65*@rem);
           color: #333333;
           .fs(24.01*@rem);
           .pl(22*@rem);
        }
        table{
           // border: 1px solid #f2f2f2;
            width: 100%;
            font-size: 0;
            color: #000000;
        }
        table tr{
            font-size: 0px;
            &.header{
                .bgColor(#0071ce);
                &>td{
                    color: @color;
                    .w(16.66%);
                }
            }
            
        }
        table tr td{
            border: 1px solid #f2f2f2;
            font-size: 18*@rem;
            color: #6a91c8;
            .p(20*@rem,0);
            text-align: center;
            margin-left: -1px;
            &:first-child{
                border-left:none;
            }
        }
    }
}
//动效
@-webkit-keyframes bounce1 {
    0%,100%{
        -webkit-transform:translate(-50%,0) rotateZ(0deg);
    }
    25%,75%{
        -webkit-transform:translate(-50%,0) rotateZ(-10deg);
    }
    50%{
        -webkit-transform:translate(-50%,0) rotateZ(10deg);
    }
}

@keyframes bounce1 {
    0%,100%{
        -webkit-transform:translate(-50%,0) rotateZ(0deg);
    }
    25%,75%{
        -webkit-transform:translate(-50%,0) rotateZ(-10deg);
    }
    50%{
        -webkit-transform:translate(-50%,0) rotateZ(10deg);
    }
}

.bounce1 {
    -webkit-animation-name: bounce1;
    animation-name: bounce1;
}
@-webkit-keyframes bounce2 {
    0%,100%{
        -webkit-transform:translate(-50%,0) rotateZ(0deg);
    }
    25%,75%{
        -webkit-transform:translate(-50%,0) rotateZ(10deg);
    }
    50%{
        -webkit-transform:translate(-50%,0) rotateZ(-10deg);
    }
}

@keyframes bounce2 {
    0%,100%{
        -webkit-transform:translate(-50%,0) rotateZ(0deg);
    }
    25%,75%{
        -webkit-transform:translate(-50%,0) rotateZ(10deg);
    }
    50%{
        -webkit-transform:translate(-50%,0) rotateZ(-10deg);
    }
}

.bounce2 {
    -webkit-animation-name: bounce2;
    animation-name: bounce2;
}


